<script setup>
import { ref } from "vue";

const checked = ref("");
</script>

<template>
	<div class="m-[10px] rounded-[10px] bg-[#ffffff] px-[10px]">
		<div class="py-[10px] text-[16px] font-[600]">费用信息</div>
		<div class="flex items-center justify-between border-b py-[10px] text-[#4b4e57]">
			服务费<span class="font-[600] text-[#fc3f34]">&yen;0.01</span>
		</div>
		<div class="flex items-center justify-between border-b py-[10px] text-[#4b4e57]">
			问诊费<span class="font-[600] text-[#fc3f34]">&yen;0.01</span>
		</div>
		<div class="flex items-center justify-between py-[10px] text-[#4b4e57]">
			打车费<span class="font-[600] text-[#fc3f34]">&yen;0.01</span>
		</div>
	</div>
	<div class="m-[10px] flex items-center justify-between rounded-[10px] bg-[#ffffff] p-[10px]">
		费用合计<span class="font-[600] text-[#fc3f34]">&yen;0.01</span>
	</div>
	<div class="m-[10px] rounded-[10px] bg-[#ffffff] px-[10px]">
		<div class="py-[10px] text-[16px] font-[600]">支付方式</div>
		<van-radio-group v-model="checked">
			<div class="flex items-center justify-between py-[10px]" @click="checked = '1'">
				<div class="flex items-center">
					<img class="mr-[10px] h-[36px] w-[36px]" src="https://oss.dingdongdr.com/static/user/weixin.png" alt="" />
					微信
				</div>
				<van-radio name="1" />
			</div>
			<div class="flex items-center justify-between py-[10px]" @click="checked = '2'">
				<div class="flex items-center">
					<img class="mr-[10px] h-[36px] w-[36px]" src="https://oss.dingdongdr.com/static/user/zhifubao.png" alt="" />
					支付宝
				</div>
				<van-radio name="2" />
			</div>
		</van-radio-group>
	</div>
	<div class="fixed bottom-0 w-[375px] bg-[#ffffff] px-[20px] py-[10px]">
		<div class="rounded-[20px] bg-gradient-to-r from-[#4d90f5] to-[#357efe] py-[10px] text-center text-[#ffffff]">
			立即支付
		</div>
	</div>
</template>
